<template>
  <div class="champion-fullpage">
    <!-- 背景粒子效果 -->
    <div id="particles-js" class="particles-container"></div>
    
    <!-- 顶部横幅 -->
    <div class="hero-banner" data-aos="fade-down">
      <div class="banner-content">
        <kinesis-container>
          <kinesis-element :strength="20" type="depth">
            <img src="@/assets/emblemAndbadge/系徽4.png" alt="金山学院校徽" class="school-logo animate__animated animate__pulse animate__infinite">
          </kinesis-element>
        </kinesis-container>
        <div class="banner-titles">
          <h1 class="hero-title">{{ studentData.level }} - {{ studentData.name }}</h1>
          <p class="hero-subtitle">{{ studentData.major }}</p>
        </div>
      </div>
      
      <!-- 王者特效：王冠 -->
      <div class="crown-effect" v-if="studentData.level === '最强王者'">
        <div class="crown">👑</div>
        <div class="glow"></div>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="content-wrapper">
      <!-- 个人信息卡片 -->
      <div class="profile-card" data-aos="zoom-in-up">
        <div class="profile-header">
          <div class="avatar-container">
            <img :src="studentData.photo" :alt="studentData.name" class="avatar" @error="handleImageError">
            <div class="avatar-ring" :class="{ 'champion-ring': studentData.level === '最强王者' }"></div>
            <div class="level-badge" :class="getLevelClass()">{{ studentData.level }}</div>
          </div>
          <div class="quick-stats">
            <div class="stat-item" data-aos="fade-right" data-aos-delay="200">
              <i class="fas fa-trophy"></i>
              <span>{{ studentData.achievementList ? studentData.achievementList.length : 0 }} 成就</span>
            </div>
            <div class="stat-item" data-aos="fade-right" data-aos-delay="300">
              <i class="fas fa-star"></i>
              <span>{{ getOverallRating() }}% 完成度</span>
            </div>
            <div class="stat-item" data-aos="fade-right" data-aos-delay="400">
              <i class="fas fa-code-branch"></i>
              <span>{{ getSkillCount() }} 技能</span>
            </div>
          </div>
        </div>
        
        <div class="profile-body">
          <div class="bio-section" data-aos="fade-up">
            <h2 class="section-title"><i class="fas fa-user"></i> 个人简介</h2>
            <p class="bio-text">{{ studentData.bio }}</p>
          </div>
          
          <div class="skill-tech-section" data-aos="fade-up" data-aos-delay="200">
            <h2 class="section-title"><i class="fas fa-code"></i> 技术栈</h2>
            <div class="tech-stack-wrapper">
              <div class="tech-stack-tags">
                <span v-for="(tech, index) in techStackArray" :key="index" 
                  class="tech-tag" 
                  :style="getRandomGradient(index)"
                  data-aos="zoom-in"
                  :data-aos-delay="100 * index">
                  {{ tech }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 技能雷达图 -->
      <div class="radar-section" data-aos="fade-up" data-aos-delay="300">
        <h2 class="section-title"><i class="fas fa-chart-radar"></i> 能力评估</h2>
        <div class="radar-container">
          <canvas ref="radarChart" class="radar-chart"></canvas>
          <div class="radar-overlay"></div>
        </div>
      </div>
      
      <!-- 成就展示 -->
      <div class="achievements-section" data-aos="fade-up" data-aos-delay="400">
        <h2 class="section-title"><i class="fas fa-award"></i> 主要成就</h2>
        <div class="achievements-grid">
          <div v-for="(achievement, index) in studentData.achievementList" 
               :key="index" 
               class="achievement-card"
               data-aos="flip-left"
               :data-aos-delay="100 * index">
            <div class="achievement-icon" v-html="achievement.icon"></div>
            <div class="achievement-content">
              <h3 class="achievement-title">{{ achievement.title }}</h3>
              <div class="achievement-shine"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 项目经验 -->
      <div class="projects-section" v-if="studentData.projectExperience" data-aos="fade-up" data-aos-delay="500">
        <h2 class="section-title"><i class="fas fa-project-diagram"></i> 项目经验</h2>
        <div class="projects-showcase">
          <div v-for="(project, index) in studentData.projectExperience" 
               :key="`project-${index}`"
               class="project-card"
               :class="{ 'highlight-project': project.highlight }"
               data-aos="fade-up"
               :data-aos-delay="150 * index">
            <h3 class="project-title">{{ project.name }}</h3>
            <p class="project-desc">{{ project.description }}</p>
            <div class="tech-tags">
              <span v-for="(tech, tIndex) in project.techUsed" 
                    :key="`tech-${tIndex}`" 
                    class="tech-used-tag">
                {{ tech }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 证书展示 -->
      <div class="certificates-section" v-if="studentData.certificates" data-aos="fade-up" data-aos-delay="600">
        <h2 class="section-title"><i class="fas fa-certificate"></i> 专业证书</h2>
        <div class="certificates-carousel">
          <div v-for="(cert, index) in studentData.certificates" 
               :key="`cert-${index}`"
               class="certificate-item"
               data-aos="zoom-in"
               :data-aos-delay="120 * index">
            <div class="certificate-icon">🎓</div>
            <div class="certificate-name">{{ cert }}</div>
            <div class="certificate-glow"></div>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="action-buttons" data-aos="fade-up" data-aos-delay="700">
        <a href="javascript:;" @click="downloadPDF" class="action-button download-button">
          <i class="fas fa-download"></i> 下载详细资料
        </a>
        <router-link :to="`/student-details/${studentData.id}`" class="action-button details-button">
          <i class="fas fa-info-circle"></i> 查看详细资料
        </router-link>
        <router-link to="/ranking" class="action-button back-button">
          <i class="fas fa-arrow-left"></i> 返回牛人榜
        </router-link>
      </div>
    </div>
    
    <!-- 底部装饰 -->
    <div class="bottom-decoration">
      <div class="wave-container">
        <div class="wave wave1"></div>
        <div class="wave wave2"></div>
        <div class="wave wave3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import soundManager from '@/utils/SoundManager';
import defaultAvatar from '@/assets/people_NR/other.jpg';
import { getStudentById } from '@/data/students';
import Chart from 'chart.js/auto';
/* eslint-disable no-undef */
import 'particles.js';
/* eslint-enable no-undef */

export default {
  name: 'ChampionView',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isMuted: false,
      defaultAvatar,
      radarChart: null,
      showParticles: false,
      particlesLoaded: false
    }
  },
  computed: {
    studentData() {
      return getStudentById(this.id);
    },
    isTopChampion() {
      return this.studentData && this.studentData.level === '最强王者';
    },
    techStackArray() {
      if (!this.studentData.techStack) return [];
      return this.studentData.techStack.split(',').map(item => item.trim());
    }
  },
  mounted() {
    // 初始化音效管理器
    soundManager.init();
    
    // 播放背景音乐（如果是最强王者）
    if (this.studentData.level === '最强王者') {
      this.playBackgroundMusic();
    } else {
      soundManager.play('click');
    }
    
    // 设置页面标题
    document.title = `${this.studentData.name} - ${this.studentData.level} | 金山学院牛人榜`;
    
    // 初始化粒子效果
    this.$nextTick(() => {
      this.initParticles();
    });
    
    // 渲染技能雷达图
    this.$nextTick(() => {
      if (this.studentData && this.studentData.skillRadar) {
        this.renderRadarChart();
      }
    });
    
    // 初始化GSAP动画
    this.initAnimations();
  },
  methods: {
    // 动画效果初始化
    initAnimations() {
      if (!this.$gsap) return;
      
      // 头像动画
      this.$gsap.to('.avatar', {
        duration: 2,
        rotation: 360,
        ease: "elastic.out(1, 0.3)",
        delay: 0.5
      });
      
      // 标题文字动画
      this.$gsap.from('.hero-title', {
        duration: 1.5,
        opacity: 0,
        y: -50,
        ease: "power3.out",
        delay: 0.2
      });
      
      // 副标题动画
      this.$gsap.from('.hero-subtitle', {
        duration: 1.5,
        opacity: 0,
        y: -30,
        ease: "power3.out",
        delay: 0.4
      });
    },
    
    // 粒子效果初始化
    initParticles() {
      /* eslint-disable no-undef */
      if (typeof particlesJS !== 'undefined' && !this.particlesLoaded) {
        particlesJS('particles-js', this.getParticlesConfig());
        this.particlesLoaded = true;
      } else {
        setTimeout(() => {
          this.initParticles();
        }, 500);
      }
      /* eslint-enable no-undef */
    },
    
    // 获取粒子配置
    getParticlesConfig() {
      const isChampion = this.studentData.level === '最强王者';
      
      return {
        particles: {
          number: {
            value: isChampion ? 100 : 50,
            density: {
              enable: true,
              value_area: 800
            }
          },
          color: {
            value: isChampion ? "#ffd700" : "#3a6ea5"
          },
          shape: {
            type: "circle",
            stroke: {
              width: 0,
              color: "#000000"
            },
            polygon: {
              nb_sides: 5
            }
          },
          opacity: {
            value: 0.5,
            random: true,
            anim: {
              enable: true,
              speed: 1,
              opacity_min: 0.1,
              sync: false
            }
          },
          size: {
            value: 3,
            random: true,
            anim: {
              enable: true,
              speed: 2,
              size_min: 0.3,
              sync: false
            }
          },
          line_linked: {
            enable: true,
            distance: 150,
            color: isChampion ? "#ffd700" : "#3a6ea5",
            opacity: 0.4,
            width: 1
          },
          move: {
            enable: true,
            speed: 2,
            direction: "none",
            random: true,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: {
              enable: false,
              rotateX: 600,
              rotateY: 1200
            }
          }
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onhover: {
              enable: true,
              mode: "grab"
            },
            onclick: {
              enable: true,
              mode: "push"
            },
            resize: true
          },
          modes: {
            grab: {
              distance: 140,
              line_linked: {
                opacity: 1
              }
            },
            bubble: {
              distance: 400,
              size: 40,
              duration: 2,
              opacity: 8,
              speed: 3
            },
            repulse: {
              distance: 200,
              duration: 0.4
            },
            push: {
              particles_nb: 4
            },
            remove: {
              particles_nb: 2
            }
          }
        },
        retina_detect: true
      };
    },
    
    getLevelClass() {
      const levelMap = {
        '最强王者': 'champion-badge',
        '王者': 'master-badge',
        '钻石': 'diamond-badge',
        '铂金': 'platinum-badge',
        '黄金': 'gold-badge'
      };
      
      return levelMap[this.studentData.level] || '';
    },
    
    getRandomGradient(index) {
      const gradients = [
        'linear-gradient(45deg, #FF416C, #FF4B2B)',
        'linear-gradient(45deg, #4776E6, #8E54E9)',
        'linear-gradient(45deg, #2193b0, #6dd5ed)',
        'linear-gradient(45deg, #834d9b, #d04ed6)',
        'linear-gradient(45deg, #00b09b, #96c93d)',
        'linear-gradient(45deg, #f857a6, #ff5858)',
        'linear-gradient(45deg, #a8ff78, #78ffd6)',
        'linear-gradient(45deg, #1e3c72, #2a5298)'
      ];
      
      const i = index % gradients.length;
      return { background: gradients[i] };
    },
    
    getOverallRating() {
      if (!this.studentData.skillRadar) return 0;
      
      const skills = this.studentData.skillRadar;
      const total = skills.reduce((sum, skill) => sum + skill.value, 0);
      return Math.round((total / (skills.length * 100)) * 100);
    },
    
    getSkillCount() {
      return this.techStackArray.length;
    },
    
    playBackgroundMusic() {
      soundManager.play('epic', { volume: 0.2, loop: true });
    },
    
    playEntranceEffect() {
      soundManager.play('whoosh');
    },
    
    handleImageError(e) {
      e.target.src = this.defaultAvatar;
    },
    
    downloadPDF() {
      alert('详细资料PDF下载功能正在开发中，敬请期待！');
    },
    
    renderRadarChart() {
      if (!this.$refs.radarChart) return;
      
      const ctx = this.$refs.radarChart.getContext('2d');
      
      // 销毁旧图表
      if (this.radarChart) {
        this.radarChart.destroy();
      }
      
      // 准备数据
      const labels = this.studentData.skillRadar.map(item => item.name);
      const data = this.studentData.skillRadar.map(item => item.value);
      
      // 获取等级对应的颜色
      const levelColors = {
        '最强王者': {
          bg: 'rgba(255, 215, 0, 0.2)',
          border: 'rgba(255, 215, 0, 1)'
        },
        '王者': {
          bg: 'rgba(157, 78, 221, 0.2)',
          border: 'rgba(157, 78, 221, 1)'
        },
        '钻石': {
          bg: 'rgba(0, 180, 216, 0.2)',
          border: 'rgba(0, 180, 216, 1)'
        },
        '铂金': {
          bg: 'rgba(69, 123, 157, 0.2)',
          border: 'rgba(69, 123, 157, 1)'
        },
        '黄金': {
          bg: 'rgba(250, 163, 7, 0.2)',
          border: 'rgba(250, 163, 7, 1)'
        }
      };
      
      const colors = levelColors[this.studentData.level] || {
        bg: 'rgba(58, 110, 165, 0.2)',
        border: 'rgba(58, 110, 165, 1)'
      };
      
      // 配置图表
      this.radarChart = new Chart(ctx, {
        type: 'radar',
        data: {
          labels: labels,
          datasets: [{
            label: '技能评分',
            data: data,
            backgroundColor: colors.bg,
            borderColor: colors.border,
            borderWidth: 2,
            pointBackgroundColor: colors.border,
            pointRadius: 4,
            pointHoverRadius: 6
          }]
        },
        options: {
          scales: {
            r: {
              min: 0,
              max: 100,
              ticks: {
                stepSize: 20,
                showLabelBackdrop: false,
                color: '#666',
                font: {
                  size: 12
                }
              },
              pointLabels: {
                font: {
                  size: 14,
                  weight: 'bold'
                },
                color: '#333'
              },
              grid: {
                color: 'rgba(0, 0, 0, 0.1)'
              },
              angleLines: {
                color: 'rgba(0, 0, 0, 0.1)'
              }
            }
          },
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              backgroundColor: 'rgba(0, 0, 0, 0.7)',
              padding: 10,
              titleFont: {
                size: 14
              },
              bodyFont: {
                size: 14
              },
              titleColor: '#fff',
              bodyColor: '#fff',
              borderColor: colors.border,
              borderWidth: 1
            }
          },
          responsive: true,
          maintainAspectRatio: false,
          animation: {
            duration: 2000,
            easing: 'easeOutQuart'
          }
        }
      });
    }
  },
  beforeDestroy() {
    // 清理音频资源
    soundManager.stop('epic');
    soundManager.stop('whoosh');
    soundManager.stop('click');
    
    // 清理图表
    if (this.radarChart) {
      this.radarChart.destroy();
    }
  }
}
</script>

<style scoped>
.champion-fullpage {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  position: relative;
  color: white;
}

/* 粒子效果容器 */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 顶部横幅 */
.hero-banner {
  position: relative;
  padding: 40px 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  min-height: 200px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.banner-content {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

.school-logo {
  width: 80px;
  height: 80px;
  margin-right: 30px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
}

.banner-titles {
  flex: 1;
}

.hero-title {
  font-size: 3em;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(45deg, #ffffff, #c3cfe2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
}

.hero-subtitle {
  font-size: 1.5em;
  margin: 10px 0 0;
  font-weight: 300;
  opacity: 0.8;
}

/* 王冠特效 */
.crown-effect {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}

.crown {
  font-size: 4em;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px gold);
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

.glow {
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255,215,0,0.7) 0%, rgba(255,215,0,0) 70%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.3); }
}

/* 主内容区 */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 个人信息卡片 */
.profile-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-header {
  display: flex;
  padding: 30px;
  align-items: center;
  gap: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar-container {
  position: relative;
  width: 180px;
  height: 180px;
}

.avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.avatar-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #3a6ea5;
  animation: spin 10s linear infinite;
  z-index: 1;
}

.champion-ring {
  border: 3px solid gold;
  box-shadow: 0 0 20px gold;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.level-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #3a6ea5;
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9em;
  z-index: 3;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.champion-badge {
  background: linear-gradient(45deg, #ffd700, #ffec8b);
  color: #8b4513;
  animation: badgePulse 2s infinite;
}

.master-badge {
  background: linear-gradient(45deg, #9d4edd, #c77dff);
}

.diamond-badge {
  background: linear-gradient(45deg, #00b4d8, #90e0ef);
}

.platinum-badge {
  background: linear-gradient(45deg, #457b9d, #a8dadc);
}

.gold-badge {
  background: linear-gradient(45deg, #faa307, #ffb703);
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}

.quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  flex: 1;
}

.stat-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 15px;
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1em;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
}

.stat-item i {
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0.7);
}

.profile-body {
  padding: 30px;
}

.bio-section {
  margin-bottom: 30px;
}

.bio-text {
  line-height: 1.6;
  font-size: 1.1em;
  color: rgba(255, 255, 255, 0.9);
}

.section-title {
  font-size: 1.6em;
  margin-bottom: 20px;
  color: white;
  position: relative;
  padding-bottom: 10px;
}

.section-title:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, white, transparent);
}

.section-title i {
  margin-right: 10px;
  opacity: 0.8;
}

.tech-stack-wrapper {
  margin-top: 20px;
}

.tech-stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.tech-tag {
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 1em;
  font-weight: 600;
  color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.tech-tag:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* 雷达图区域 */
.radar-section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.radar-container {
  position: relative;
  height: 400px;
  margin-top: 20px;
}

.radar-chart {
  position: relative;
  z-index: 2;
}

.radar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 70%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 3;
  pointer-events: none;
}

/* 成就展示 */
.achievements-section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.achievement-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.achievement-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.achievement-icon {
  font-size: 3em;
  margin-bottom: 15px;
  color: gold;
}

.achievement-title {
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
  color: white;
}

.achievement-shine {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -180%;
  left: -50%;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 75%,
    rgba(255, 255, 255, 0.15) 100%
  );
  transform: rotate(35deg);
  transition: all 0.6s ease;
}

.achievement-card:hover .achievement-shine {
  top: 200%;
  left: 200%;
}

/* 项目经验 */
.projects-section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.projects-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.project-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  padding: 25px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.project-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.highlight-project {
  border-left: 3px solid gold;
  background: linear-gradient(to right, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.2));
}

.project-title {
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 15px;
  color: white;
}

.project-desc {
  font-size: 1em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-used-tag {
  background: rgba(255, 255, 255, 0.1);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.9);
}

/* 证书展示 */
.certificates-section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.certificates-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.certificate-item {
  background: linear-gradient(135deg, #4a00e0, #8e2de2);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.certificate-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.certificate-icon {
  font-size: 3em;
  margin-bottom: 10px;
}

.certificate-name {
  font-weight: 600;
  color: white;
}

.certificate-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.certificate-item:hover .certificate-glow {
  opacity: 1;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.action-button {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.action-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.download-button {
  background: linear-gradient(45deg, #3a6ea5, #2a5282);
}

.details-button {
  background: linear-gradient(45deg, #ff416c, #ff4b2b);
}

.back-button {
  background: rgba(255, 255, 255, 0.2);
}

/* 波浪效果 */
.bottom-decoration {
  position: relative;
  height: 150px;
  width: 100%;
  overflow: hidden;
}

.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="%23FFFFFF"/></svg>') repeat-x;
  background-size: 1200px 100px;
  animation: wave 25s linear infinite;
}

.wave1 {
  animation-duration: 25s;
  opacity: 0.3;
  bottom: 0;
}

.wave2 {
  animation-duration: 20s;
  animation-delay: -5s;
  bottom: 10px;
  opacity: 0.2;
}

.wave3 {
  animation-duration: 15s;
  animation-delay: -2s;
  bottom: 20px;
  opacity: 0.1;
}

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .profile-header {
    flex-direction: column;
    gap: 20px;
  }
  
  .avatar-container {
    margin: 0 auto;
  }
  
  .quick-stats {
    width: 100%;
  }
  
  .projects-showcase {
    grid-template-columns: 1fr;
  }
  
  .hero-title {
    font-size: 2.5em;
  }
  
  .hero-subtitle {
    font-size: 1.3em;
  }
}

@media (max-width: 768px) {
  .banner-content {
    flex-direction: column;
    text-align: center;
  }
  
  .school-logo {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-title {
    font-size: 2em;
  }
  
  .hero-subtitle {
    font-size: 1.1em;
  }
  
  .crown {
    font-size: 3em;
  }
}
</style> 